<template>
  <div class="app-container">
    <!-- 个人信息 -->
    <div class="cqt-box-item">
        <h3>个人信息</h3>
           <el-form :model="userInfo">
            <el-form-item label="ID" label-width="120px">
                <el-input v-model="userInfo.id" auto-complete="off" disabled ></el-input>
            </el-form-item>

            <el-form-item label="用户名" label-width="120px">
                <el-input v-model="userInfo.name" auto-complete="off" disabled ></el-input>
            </el-form-item>

            <el-form-item label="用户密码" label-width="120px">
                <el-input v-model="userInfo.password" auto-complete="off"  disabled></el-input>
            </el-form-item>
  
            <el-form-item>
            <el-button type="primary" @click="handleEditUser">编辑</el-button>
            </el-form-item>

            </el-form>
    </div>

<!-- 个人信息编辑 -->
    <el-dialog title="个人信息编辑" :visible.sync="dialogUserFormVisible">
        <el-form :model="userForm">
            <el-form-item label="ID" label-width="120px">
                <el-input v-model="userForm.id" auto-complete="off" disabled ></el-input>
            </el-form-item>

            <el-form-item label="用户名" label-width="120px">
                <el-input v-model="userForm.name" auto-complete="off" @change="checkName" ></el-input>
            </el-form-item>

            <el-form-item label="用户密码" label-width="120px">
                <el-input v-model="userForm.password" auto-complete="off" @change="checkPassword" ></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUserFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateMyself">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>



<script>
import { getMyselfInfo, updateMyselfInfo, hasUserByName } from "@/api/user";
import { getToken } from "@/utils/auth";

export default {
  data() {
    return {
      //用户个人ID
      UserToken: null,

      //用户个人信息
      userInfo: {
        id: null,
        name: null,
        password: null
      },

      //用户个人编辑页面是否关闭
      dialogUserFormVisible: false,

      //用户个人信息编辑页面缓存数据
      userForm: {
        id: null,
        name: null,
        password: null
      }
    };
  },
  created() {
    //初始化获取Token值
    this.UserToken = getToken();
    this.init();
  },
  methods: {
    init() {
      // 初始化请求
      this.loadexUserData();
    },

    //加载用户信息
    loadexUserData() {
      getMyselfInfo(this.UserToken).then(response => {
        var data = response.data;
        this.userInfo = data;
      });
    },

    //更新用户信息编辑页面(处理器)
    handleEditUser() {
      this.userForm.id = this.userInfo.id;
      this.userForm.name = this.userInfo.name;
      this.userForm.password = this.userInfo.password;
      this.dialogUserFormVisible = true;
    },

    /**
     * 校验用户密码
     */
    checkPassword(val) {
      if (val == null || val == "") {
        alert("密码不能为空！");
        this.userForm.password = "";
        return;
      }
    },

    /**
     * 校验用户名是否为空或者是否已经存在
     */

    checkName(val) {
      if (val == "" || val == null) {
        alert("用户名不能为空！");
        return;
      }

      //判断用户名是否发生变化
      if (this.userInfo.name != this.userForm.name) {
        //如果发生变化判断用户名是否重复
        var params = {
          name: this.userForm.name
        };

        hasUserByName(params).then(response => {
          if (response.data) {
            alert("用户名已被占用，请您重新命名");
            this.userForm.name = "";
            return;
          }
        });
      }
    },

    //更新用户信息
    updateMyself() {
      if (this.userForm.name == "" || this.userForm.name == null) {
        alert("用户名不能为空！");
        return;
      }

      if (this.userForm.password == "" || this.userForm.password == null) {
        alert("用户密码不能为空！");
        return;
      }
      
      //判断用户名是否发生变化
      if (this.userInfo.name != this.userForm.name) {
        //如果发生变化判断用户名是否重复
        var params = {
          name: this.userForm.name
        };

        hasUserByName(params).then(response => {
          if (response.data) {
            alert("用户名已被占用，请您重新命名");
            this.userForm.name = "";
            return;
          }
            var data = this.userForm;
          // TODO该方法进行用户信息的更新
          updateMyselfInfo(data)
            .then(response => {
              this.$message("操作成功");
              this.dialogUserFormVisible = false;
            })
            .catch(err => {
              console.log(response.msg);
            });
        });
      }else{
          // TODO该方法进行用户信息的更新
          updateMyselfInfo(data)
            .then(response => {
              this.$message("操作成功");
              this.dialogUserFormVisible = false;
            })
            .catch(err => {
              console.log(response.msg);
            });
      }
    
    }
  }
};
</script>

<style scoped>
.line {
  text-align: center;
}
.cqt-box-item h3 > button {
  margin-left: 20px;
}
.el-form-item .el-tag {
  margin-left: 2px;
  margin-right: 2px;
}
.el-pagination {
  margin-top: 20px;
}
.el-table {
  margin-bottom: 60px;
}
.cqt-caption {
  font-size: 14px;
  color: #ccc;
  padding: 10px 20px;
  background-color: #f7f7f7;
  border-radius: 4px;
  margin: 0;
}

.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
